<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  icon: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '添加'
  },
  danger: Boolean,
  disabled: Boolean,
})
const emit = defineEmits(['click'])

let disabled = computed(() => props.disabled)
let danger = computed(() => props.danger)
let title = computed(() => props.title)
let btnIcon = ref('')

const clickHandler = () => {
  if (!disabled.value) {
    emit('click')
  }
}

watch(() => props.icon, () => {
  if (props.icon) {
    let defaultKey = {
      'create': '',
      'update': '',
      'delete': ''
    }
    btnIcon.value = Object.keys(defaultKey).includes(props.icon) ? defaultKey[props.icon] : props.icon
  } else {
    btnIcon.value = ''
  }
})
</script>

<template>
  <span
      class="action-link"
      :class="{'link-danger': danger, 'link-disabled': disabled}"
      @click="clickHandler"
  >
    <my-icon :type="icon" v-if="btnIcon"></my-icon>
    {{ title }}
  </span>
</template>
